<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身-首页</title>
</head>

<body>
    <main>
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide bg1"></div>
                <div class="swiper-slide bg2"></div>
                <div class="swiper-slide bg3"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>

        <!-- 版心 -->
        <div class="container">
            <!-- 排名+打卡 -->
            <div class="rank-punch">
                <!-- 左排名 -->
                <div class="rank">
                    <h3>今日排名</h3>
                    <p id="ranking"></p>
                </div>
                <!-- 右打卡 -->
                <div class="punch">
                    <h3>累积打卡<span id="clockCount"></span>天</h3>
                    <button id="clockBtn">今日打卡</button>
                </div>
            </div>

            <!-- 运动数据+徽章 -->
            <div class="data-badge">
                <!-- 左边运动数据 -->
                <div class="data">
                    <h3>运动数据</h3>
                </div>
                <!-- 右边徽章 -->
                <div class="badge">
                    <h3>累积运动徽章</h3>
                    <div>
                        <b id="badges"></b>
                        <span>枚</span>
                    </div>
                </div>
            </div>

            <!-- 训练 -->
            <div class="train">
                <h3>课程训练</h3>
            </div>

            <!-- 户外跑步 -->
            <div class="run">
                <h3>户外跑步</h3>
            </div>
        </div>
    </main>



</body>

</html>